<template>
  <div class="app-container">

    <!-- 搜索表单 -->
    <el-form ref="queryRef" :inline="true" label-width="68px">
      <el-form-item label="品牌名称" prop="name">
        <el-input
            placeholder="请输入品牌名称"
            clearable
            v-model="queryParams.name"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 功能按钮栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
            type="primary"
            plain
            icon="Plus"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="success"
            plain
            icon="Edit"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="danger"
            plain
            icon="Delete"
        >删除
        </el-button>
      </el-col>
    </el-row>

    <!-- 数据展示表格 -->
    <el-table :data="brandList" v-loading="loading">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="品牌名称" prop="name" width="200"/>
      <el-table-column label="品牌图标" prop="logo" #default="scope">
        <img :src="scope.row.logo" width="50"/>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit">修改</el-button>
          <el-button link type="primary" icon="Delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页条组件 -->
    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />


  </div>
</template>

<script setup name="Brand">
//=================1.导入区域=================
import { listBrand } from '@/api/product/brand'




//=================2.变量区域=================

//定义分页列表数据模型
const brandList = ref([]);
//定义列表总记录数模型
const total = ref(2);
// 加载数据效果
const loading = ref(false);

const data = reactive({
  queryParams: {
    name: null,
    pageNum: 1,
    pageSize: 1
  }
})

const {queryParams} =  toRefs(data); //将reactive声明的多个参数，转换为单个ref变量


//=================3.事件处理区域=================
function getList(){
  loading.value = true
  listBrand(queryParams.value).then((result)=>{
    loading.value = false
    brandList.value = result.rows
    total.value = result.total
  })
}

function handleQuery(){
  getList();
}

function resetQuery(){
  queryParams.value.name = null
  queryParams.value.pageNum = 1
  queryParams.value.pageSize = 1
  getList()
}

getList();

</script>